import React, { Component, Fragment } from 'react';
import { Modal, Table } from 'antd';

const columns = [
  { title: '序号', dataIndex: 'key', key: 'key' },
  { title: '数据源名称', dataIndex: 'name', key: 'name' },
  { title: '是否安装表计', dataIndex: 'isIn', key: 'isIn' },
];

const tableData = [
  {
    key: 1,
    name: '柴油消耗量(铲车消耗)',
    isIn: '是',
    description: `已入地磅库电厂：
          五华电厂、荥阳电厂、汉口电厂、连云港电厂、长春电厂、西山电厂、八方电厂、银川电厂
          未入地磅库电厂：
          绥化电厂、温岭电厂、松原电厂、高密电厂、七台河电厂、唐山电厂、林州电厂、乐亭电厂`,
  },
  {
    key: 2,
    name: '柴油消耗量(铲车消耗)',
    isIn: '是',
    description: `已入地磅库电厂：
            五华电厂、荥阳电厂、汉口电厂、连云港电厂、长春电厂、西山电厂、八方电厂、银川电厂
            未入地磅库电厂：
            绥化电厂、温岭电厂、松原电厂、高密电厂、七台河电厂、唐山电厂、林州电厂、乐亭电厂`,
  },
  {
    key: 3,
    name: '柴油消耗量(铲车消耗)',
    isIn: '是',
    description: `已入地磅库电厂：
            五华电厂、荥阳电厂、汉口电厂、连云港电厂、长春电厂、西山电厂、八方电厂、银川电厂
            未入地磅库电厂：
            绥化电厂、温岭电厂、松原电厂、高密电厂、七台河电厂、唐山电厂、林州电厂、乐亭电厂`,
  },
  {
    key: 4,
    name: '柴油消耗量(铲车消耗)',
    isIn: '是',
    description: `已入地磅库电厂：
            五华电厂、荥阳电厂、汉口电厂、连云港电厂、长春电厂、西山电厂、八方电厂、银川电厂
            未入地磅库电厂：
            绥化电厂、温岭电厂、松原电厂、高密电厂、七台河电厂、唐山电厂、林州电厂、乐亭电厂`,
  },
  {
    key: 5,
    name: '柴油消耗量(铲车消耗)',
    isIn: '是',
    description: `已入地磅库电厂：
            五华电厂、荥阳电厂、汉口电厂、连云港电厂、长春电厂、西山电厂、八方电厂、银川电厂
            未入地磅库电厂：
            绥化电厂、温岭电厂、松原电厂、高密电厂、七台河电厂、唐山电厂、林州电厂、乐亭电厂`,
  },
  {
    key: 6,
    name: '柴油消耗量(铲车消耗)',
    isIn: '是',
    description: `已入地磅库电厂：
            五华电厂、荥阳电厂、汉口电厂、连云港电厂、长春电厂、西山电厂、八方电厂、银川电厂
            未入地磅库电厂：
            绥化电厂、温岭电厂、松原电厂、高密电厂、七台河电厂、唐山电厂、林州电厂、乐亭电厂`,
  },
  {
    key: 7,
    name: '柴油消耗量(铲车消耗)',
    isIn: '是',
    description: `已入地磅库电厂：
            五华电厂、荥阳电厂、汉口电厂、连云港电厂、长春电厂、西山电厂、八方电厂、银川电厂
            未入地磅库电厂：
            绥化电厂、温岭电厂、松原电厂、高密电厂、七台河电厂、唐山电厂、林州电厂、乐亭电厂`,
  },
  {
    key: 8,
    name: '柴油消耗量(铲车消耗)',
    isIn: '是',
    description: `已入地磅库电厂：
            五华电厂、荥阳电厂、汉口电厂、连云港电厂、长春电厂、西山电厂、八方电厂、银川电厂
            未入地磅库电厂：
            绥化电厂、温岭电厂、松原电厂、高密电厂、七台河电厂、唐山电厂、林州电厂、乐亭电厂`,
  },
  {
    key: 9,
    name: '柴油消耗量(铲车消耗)',
    isIn: '是',
    description: `已入地磅库电厂：
            五华电厂、荥阳电厂、汉口电厂、连云港电厂、长春电厂、西山电厂、八方电厂、银川电厂
            未入地磅库电厂：
            绥化电厂、温岭电厂、松原电厂、高密电厂、七台河电厂、唐山电厂、林州电厂、乐亭电厂`,
  },
  {
    key: 10,
    name: '柴油消耗量(铲车消耗)',
    isIn: '是',
    description: `已入地磅库电厂：
            五华电厂、荥阳电厂、汉口电厂、连云港电厂、长春电厂、西山电厂、八方电厂、银川电厂
            未入地磅库电厂：
            绥化电厂、温岭电厂、松原电厂、高密电厂、七台河电厂、唐山电厂、林州电厂、乐亭电厂`,
  },
];

export default class RightFirstTableModal extends Component {
  render() {
    const { visible, handleCancel } = this.props;

    return (
      <Fragment>
        <Modal
          title={'重点数据源表计安装情况'}
          visible={visible}
          onCancel={handleCancel}
          footer={null}
          width={'80%'}
          maskClosable={false}
          centered
        >
          <Table
            columns={columns}
            expandable={{
              expandedRowRender: record => (
                <p style={{ margin: 0 }}>{record.description}</p>
              ),
              rowExpandable: record => record.name !== 'Not Expandable',
            }}
            dataSource={tableData}
            pagination={false}
          />
        </Modal>
      </Fragment>
    );
  }
}
